<template>
  <cm-popup ref="cmPopup" direction="bottom" :exist="exist">
    
    <cm-picker-head
      :col-names="colNames"
      @right-click="confirmClickhHandler"
      @left-click="cancelClickHandler">
      <view class="cm-picker-date-popup-switch cm-flex" v-if="type === 'both'">
        <view class="cm-picker-date-popup-switch-item" :class="[ isSolarPicker ? 'active' : '' ]" @click="changePicker(true)">公历</view>
        <view class="cm-picker-date-popup-switch-split"></view>
        <view class="cm-picker-date-popup-switch-item" :class="[ !isSolarPicker ? 'active' : '' ]" @click="changePicker(false)">农历</view>
      </view>
      <slot v-else></slot>
    </cm-picker-head>
    
    <view class="cm-picker-date-popup-wrapper">
      <!-- 如果用display:none来进行控制，会出现渲染错乱的未知BUG -->
      <!-- 因此这里通过绝对定位、白色背景，控制公历Picker和农历Picker的层级，来决定谁显示在上层 -->
      <!-- 公历表 -->
      <cm-picker-solar class="cm-picker-date-item" ref="solarPicker"
        v-if="type !== 'lunar'" :class="[ isSolarPicker ? 'up' : 'down' ]"
        :cm-style="{ height: '260px' }"
        :type="solarType"
        :start="solarStart"
        :end="solarEnd"
        :values="solarValues"
        :indicator-style="indicatorStyle"
        @change="solarChangeHandler">
      </cm-picker-solar>
      <!-- 农历表 -->
      <cm-picker-lunar class="cm-picker-date-item" ref="lunarPicker"
        v-if="type !== 'solar'" :class="[ isSolarPicker ? 'down' : 'up' ]"
        :cm-style="{ height: '260px' }"
        :type="lunarType"
        :start="lunarStart"
        :end="lunarEnd"
        :values="lunarValues"
        :indicator-style="indicatorStyle"
        @change="lunarChangeHandler">
      </cm-picker-lunar>      
    </view>

    
  </cm-popup>
</template>

<script src="./cm-picker-date-popup.js"></script>

<style lang="stylus">
@import './cm-picker-date-popup.styl'
</style>
